<style>
 .popup{
 background:#000;
 opacity: 0.9;
 cursor: pointer;
 z-index:99999;
 width:100%;
 height:100%;
 position:fixed;
 top:0px;
 }
 .image{
  cursor: pointer;
  opacity: 1;
  z-index:1000000;
  position:absolute;
  width:100%;
  margin:auto;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align:center;
 }
 .image .bntclose{
 position:absolute;
  cursor: pointer;
 color:#fff;
 font-weight:bold;
 padding-top:5px;
  padding-bottom:5px;
 text-align:right;
 }
  .image .bntclose img{
   position:absolute;
   width:60px;
   top:-20px;
  }
 #img{
// box-shadow: 0px 0px 25px #fff;
 }
 </style>
  	<div class="image" style="display:none;" onclick="closepopup(100);">
	<div class="bntclose">
		<img id="close" src="./images/close.png">
	</div>
	<img id="img" src="{$data.link}">
	</div>
 <div class="popup">
 </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
function loadpopup(){
var top={$data.top}; //muon lech len tren top bao nhieu px
	var imgsrc = $("#img").prop("src");
	var img = new Image();
		img.src = imgsrc;
	var iHeight=img.height;
	if(iHeight<=0) 
	{
		setTimeout(function(){ loadpopup(); },200);
		return;
	}
	if(iHeight> window.innerHeight+top-80)
	{
		iHeight=window.innerHeight+top-80;
	}
	$("#img").css("height",iHeight);
	$(".image").css("height",iHeight+20);
	$(".bntclose").css("width",(window.innerWidth+img.width*(iHeight/img.height))/2-20);
	closepopup({$data.autoclose});
}
function closepopup(sec)
{
	$(".image").delay(sec).fadeOut(500);
	$(".popup").delay(sec).fadeOut(500);
}
 // executes when HTML-Document is loaded and DOM is ready
loadpopup();
$("#close").mouseover(function(){
this.src="./images/closeh.png";
});
$("#close").mouseout(function(){
this.src="./images/close.png";
});
$(".image").show();
</script>